import React from 'react';
import {browserHistory} from 'react-router';
import { Tag, Card, Form, Input, Select, InputNumber, Checkbox, Row, Col, Button, Icon, message, Spin, Modal, Upload, Tooltip, Popconfirm, notification } from 'antd';
const TextArea = Input.TextArea;
const Option = Select.Option;
const FormItem = Form.Item;

import TableView from './../TableView';
import * as actions from './../../../actions/backstage/productAction';
var clors = ['pink','pink-inverse','red','red-inverse','orange','orange-inverse','yellow','yellow-inverse','cyan','cyan-inverse','green','green-inverse','blue','blue-inverse','purple','purple-inverse'];
const menus = [
    'source',
    '|',
    'bold',
    'underline',
    'italic',
    'strikethrough',
    'eraser',
    'forecolor',
    'bgcolor',
    '|',
    'link',
    'unlink',
    '|',
    'quote',
    'fontfamily',
    'fontsize',
    'unorderlist',
    'alignleft',
    'aligncenter',
    'alignright',
    '|',
    'undo',
    'redo',
    'fullscreen',
    '|',
    'lineheight',
    'indent',
    'table',
    'emotion'
];

class productDetail extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        productDetial: { product:{} },
        loading: false,
        fileVerify: false,
        isJPG: false,
        isLt2M: true,
        updateFile: null,
        addProductPage: false,
        createTimer: null,
        updateTimer: null,
        updateLoading: false,
        visibleAddAlert: false,
        imageData: {
            content: "",
            type: 1,
            order: 1
        },
        updateImageVisible: false,
        imgTextEditor: null,
        updateImageLoading: false,
        fileVerifyProduct: false,
        updateImageAndTextProgress: '上传中...',
        deleteImageLoading: false,
        tipImageTextSpinning: '删除中，请等待...',
        sortIsEnabled: false,
        orderUpdating: false,

        findProduct: GLOBAL.baseURL + "/webAPI/product/findProducts",
        productList: false,
        updateLoadingProduct: false,
        searchObject: {},
        totalPageNum: 0,
        productListData: [],
        tempProductData: []
      }
    }
    componentDidMount(){
      actions.findProductDetial(this, this.props.routeParams.id);
    }
    btnShowProductList(val){
      var that = this;
      if(val == true){
        this.setState({productList: val, tempProductData: this.state.productDetial.product.relatedProductsIds},()=>{
            setInterval(function () {
                window.onResize();},300),

                setTimeout(function () {
                    that.refs["productListView"].refreshData();
                    window.onresize();
                }, 800)
        });
      }else if(val == false){
        this.setState({productList: val},()=>{
          that.setState({tempProductData: []});
        });
      }
    }
    getServiceData(data) {
        this.setState({
          productListData: data,
          updateLoadingProduct: false
        });
    }
    totalPageNum(num) {
        this.setState({
          totalPageNum: num
        });
    }
    onTypeChange(val){
        if(val == -1){
          delete this.state.searchObject.type;
          delete this.state.searchObject.status;
        }else {
          this.state.searchObject.type = val;
          this.state.searchObject.status = "active"
        }
        this.refs["productListView"].refreshData();
    }
    btnConfirmProduct(){
      if(this.state.tempProductData.length >= 1){
        this.state.productDetial.product.relatedProductsIds = this.state.tempProductData;
        actions.modifyRelatedProducts(this, this.state.productDetial.product, "add")
      }else {
        Modal.success({
          title: '提示：',
          content: '至少关联一个商品。'
        });
      }
    }
    selectProduct(item){
      var havePId = false;
      for (var i = 0; i < this.state.tempProductData.length; i++) {
        if (this.state.tempProductData[i] == item.id){
          this.state.tempProductData.splice(i, 1);
          havePId = true; break;
        }
      }

      if(havePId == false){
        if(this.state.tempProductData.length < 8){
          if(item.id == this.state.productDetial.product.id){
            Modal.success({
              title: '提示：',
              content: '对不起，不能本商品自己关联自己。'
            });
          }else {
            this.state.tempProductData.push(item.id);
          }
        }else {
          Modal.success({
            title: '提示：',
            content: '最多选择 8 个商品。'
          });
        }
      }
      this.setState({tempProductData: this.state.tempProductData});
    }
    //尺寸：375 x 500（px）
    getImgSize(imgFile){
        var that = this;
        var reader = new FileReader();
        reader.readAsDataURL(imgFile)
        reader.onload = function (e) {
           var image = new Image();
           image.src = e.target.result;
           image.onload= () => {
             // if(image.naturalWidth != 375 || image.naturalHeight != 500){
             //     notification.warn({
             //         placement: 'bottomRight',
             //         message: 'Prompt',
             //         description: 'Image size: Must be 375 * 500 pixels!',
             //         style: {
             //           borderLeft: '4px solid rgb(255, 191, 0)'
             //         }
             //     });
             //     that.state.fileVerify = false;
             // }
             // else{
                 that.state.fileVerify = true;
                 delete that.state.productDetial.product.productPic;
                 that.setState({productDetial: that.state.productDetial, loading: true});
                 actions.addOrEditProductPic(that, that.state.productDetial.product.id, that.state.updateFile);
             // }
   	      }
       }
    }
    //尺寸：宽：最小 100, 最大 800 x 高：最小 100，无上限（px）
    getImgSizeByProduct(imgFile, imgId){
        var that = this;
        var reader = new FileReader();
        reader.readAsDataURL(imgFile);
        reader.onload = function (e) {
           var image = new Image();
           image.src = e.target.result;
           image.onload= () => {
               that.state.fileVerifyProduct = true;
               document.getElementById(imgId).src = e.target.result;
             // if((image.naturalWidth >= 100 && image.naturalWidth <= 800) && image.naturalHeight >= 100){
             //
             // }else{
             //   notification.warn({
             //       placement: 'bottomRight',
             //       message: '提示：',
             //       description: '图片宽：最小 100, 最大 800 ，高最小 100，无上限（px）',
             //       style: {
             //         borderLeft: '4px solid rgb(255, 191, 0)'
             //       }
             //   });
             //   that.state.fileVerifyProduct = false;
             // }
   	      }
       }
    }
    beforeUpload(file) {
      const isJPG = (file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif' || file.type === 'image/bmp');
      if (!isJPG) {
        notification.warn({
            placement: 'bottomRight',
            message: 'Prompt',
            description: 'You can upload JPG, PNG, GIF or BMP file!',
            style: {
              borderLeft: '4px solid rgb(255, 191, 0)'
            }
        });
        return false;
      }
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        notification.warn({
            placement: 'bottomRight',
            message: 'Prompt',
            description: 'Image must smaller than 2MB!',
            style: {
              borderLeft: '4px solid rgb(255, 191, 0)'
            }
        });
        return false;
      }
      this.getImgSize(file);

      this.state.isJPG = isJPG;
      this.state.isLt2M = isLt2M;
      this.state.updateFile = file;

      return false;
    }
    onImgLoad(e){
      $(e.currentTarget).css("backgroundImage", "none");
    }
    //屏蔽回车
    screenedCarriageReturn(e){
      if (e.keyCode === 13) {
          e.preventDefault();
          return false;
      }
    }
    cloneObj(obj){
        var str, newobj = obj.constructor === Array ? [] : {};
        if(typeof obj !== 'object'){
            return;
        } else if(window.JSON){
            str = JSON.stringify(obj), //序列化对象
            newobj = JSON.parse(str); //还原
        } else {
            for(var i in obj){
                newobj[i] = typeof obj[i] === 'object' ? cloneObj(obj[i]) : obj[i];
            }
        }
        return newobj;
    }
    changeStatus(){
      this.setState({
        selectData: this.cloneObj(this.state.productDetial.product)
      }, function(){
        if(this.state.selectData.status == "inactive"){
          this.state.selectData.status = "active";
        }else {
          this.state.selectData.status = "inactive";
        }
        actions.changeStatus(this, this.state.selectData, "detail");
      });
    }
    editProduct(){
      this.setState({
        addProductPage: true,
        selectData: this.cloneObj(this.state.productDetial.product),
        createTimer: ((this.state.productDetial.product.commitTime == undefined)?null:new Date(this.state.productDetial.product.commitTime).Format("yyyy-MM-dd hh:mm:ss")),
        updateTimer: ((this.state.productDetial.product.updateTime == undefined)?null:new Date(this.state.productDetial.product.updateTime).Format("yyyy-MM-dd hh:mm:ss")),
      });
    }
    // 提交商品表单
    addAndEditSubmit(e) {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
          if (!err) {
              values.qualityGuaranteePeriod = values.qualityGuaranteePeriod.toString();
              for (var item in values) {
                this.state.selectData[item] = values[item];
              }

              this.setState({
                visibleAddAlert: true
              });
          }
        });
    }
    resetFields(){
      this.setState({addProductPage: false});
      this.props.form.resetFields();
    }
    onConfirmUpdate(){
        this.setState({visibleAddAlert: false, updateLoading: true});
        actions.addOrEditProduct(this, this.state.selectData);
    }
    btnShowImage(value){
        if(value == true){
            if(this.state.imgTextEditor == null){
                var that = this;
                setTimeout(function(){
                  wangEditor.config.printLog = false;
                  that.state.imgTextEditor = new wangEditor('divImgText');
                  that.state.imgTextEditor.config.menus = menus;
                  that.state.imgTextEditor.onchange = function () {
                      that.setState({
                        imageData: {
                            ...that.state.imageData,
                            content: this.$txt.html()
                        }
                      });
                  };
                  that.state.imgTextEditor.create();
                  that.state.imgTextEditor.$txt.html('<p>请输入内容...</p>');
                }, 400);
            }else{
                this.state.imgTextEditor.$txt.html('<p>请输入内容...</p>');
            }
            // this.onRefreshData(); //同步一下数据
        }else{
            $("#imgImageAndText").attr("src", "/src/styles/images/imageTxt.png");
            this.setState({updateImageLoading: value});
        }

        if(this.state.productDetial.product.id == null){
            this.setState({updateImageVisible: value});
        }else{
            this.setState({
              updateImageVisible: value,
              imageData: {
                  id: this.state.productDetial.product.id,
                  content: "",
                  type: this.state.productDetial.product.type,
                  order: this.state.imageData.order
              }
            });
        }
    }
    beforeUploadImage() {
        if($("#filePic")[0].files.length >= 1){
            var file = $("#filePic")[0].files[0];
            if (!(file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif' || file.type === 'image/bmp')) {
              notification.warn({
                  placement: 'bottomRight',
                  message: '提示：',
                  description: '您只能上传 JPG、PNG、GIF 和 BMP 文件！',
                  style: {
                    borderLeft: '4px solid rgb(255, 191, 0)'
                  }
              });
              return false;
            }
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isLt2M) {
              notification.warn({
                  placement: 'bottomRight',
                  message: '提示：',
                  description: '照片必须小于 2MB!',
                  style: {
                    borderLeft: '4px solid rgb(255, 191, 0)'
                  }
              });
              return false;
            }
            this.getImgSizeByProduct($("#filePic")[0].files[0], "imgImageAndText");
        }
        return true;
    }
    btnSaveRichText(){
        if(this.beforeUploadImage()){
            if($("#filePic")[0].files.length >= 1){
              if(this.state.fileVerifyProduct == true){
                if(confirm("你确定要保存：图文信息 吗？")){
                    this.setState({updateImageLoading: true});
                    //获取图文，最大 order，在 (order+1)
                    if(this.state.imageData.itId == undefined && this.state.productDetial.relatedProducts != null){
                      if(this.state.productDetial.imageTextList == undefined){
                          this.state.imageData.order = 1;
                      }else{
                          var order = 1;
                          for (var i = 0; i < this.state.productDetial.imageTextList.length; i++) {
                              var tempOrder = parseInt(this.state.productDetial.imageTextList[i].order);
                              if(tempOrder > order){
                                  order = tempOrder;
                              }
                          }
                          this.state.imageData.order = (order + 1);
                      }
                    }
                    if ($("#filePic")[0].files.length >= 1){
                        this.setState({updateImageAndTextProgress: "上传图文中...", isAddImageAndTextLock: true});
                    }else{
                        this.setState({updateImageAndTextProgress: "提交中...", isAddImageAndTextLock: true});
                    }
                    actions.editImageText(this, this.state.imageData);
                }
              }else {
                notification.warn({
                    placement: 'bottomRight',
                    message: '提示：',
                    description: '图片宽：最小 100, 最大 800 ，高最小 100，无上限（px）',
                    style: {
                      borderLeft: '4px solid rgb(255, 191, 0)'
                    }
                });
              }
            }else {
              if(confirm("你确定要保存：文本信息 吗？")){
                  this.setState({updateImageLoading: true});
                  //获取图文，最大 order，在 (order+1)
                  if(this.state.imageData.itId == undefined && this.state.productDetial.relatedProducts != null){
                    if(this.state.productDetial.imageTextList == undefined){
                        this.state.imageData.order = 1;
                    }else{
                        var order = 1;
                        for (var i = 0; i < this.state.productDetial.imageTextList.length; i++) {
                            var tempOrder = parseInt(this.state.productDetial.imageTextList[i].order);
                            if(tempOrder > order){
                                order = tempOrder;
                            }
                        }
                        this.state.imageData.order = (order + 1);
                    }
                  }
                  if ($("#filePic")[0].files.length >= 1){
                      this.setState({updateImageAndTextProgress: "上传图文中...", isAddImageAndTextLock: true});
                  }else{
                      this.setState({updateImageAndTextProgress: "提交中...", isAddImageAndTextLock: true});
                  }
                  actions.editImageText(this, this.state.imageData);
              }
            }
        }
    }
    onlyDeletedImg(id, pic, index){
        if(pic == undefined){
            return;
        }else{
            var onlyDeletedImg = <Popconfirm title="你确定要仅删除图片吗?"  onConfirm={this.btnOnlyDeleteImage.bind(this, id, index)} placement="topRight">
                <Button icon="close" type="danger" className="btnDeleteImage" shape="circle" title="点击删除图片"/>
            </Popconfirm>
            return onlyDeletedImg;
        }
    }
    btnOnlyDeleteImage(id, index){
        this.refs["imageText_" + index].setState({spinning: true});
        actions.removeImageTextPic(this, id, index);
    }
    btnDeleteRelated(pId){
        for (var i = 0; i < this.state.productDetial.product.relatedProductsIds.length; i++) {
          if (this.state.productDetial.product.relatedProductsIds[i] == pId){
            this.state.productDetial.product.relatedProductsIds.splice(i, 1);
          }
        }
        actions.modifyRelatedProducts(this, this.state.productDetial.product, "delete");
    }
    btnDeleteImage(itId, picUrl, index){
        this.refs["imageText_" + index].setState({spinning: true});

        actions.removeImageText(this, {
            id: this.state.productDetial.product.id,
            itId: itId,
            pic: picUrl
        });
    }
    btnModifyImage(itId, order, content, item){
        this.setState({
            updateImageVisible: true,
            imageData: {
                id: this.state.productDetial.product.id,
                itId: itId,
                order: order,
                content: content,
                type: this.state.productDetial.product.type
            }
        });
        setTimeout(function(){
            if(item.pic == undefined || item.pic == ""){
                $("#imgImageAndText").attr("src", "/src/styles/images/imageTxt.png");
            }else {
                $("#imgImageAndText").attr("src", "http://tinsley.oss-cn-shenzhen.aliyuncs.com/" + item.pic);
            }
        },500);
        if(this.state.imgTextEditor == null){
            var that = this;
            setTimeout(function(){
                wangEditor.config.printLog = false;
                that.state.imgTextEditor = new wangEditor('divImgText');
                that.state.imgTextEditor.config.menus = menus;
                that.state.imgTextEditor.onchange = function () {
                    that.setState({
                      imageData: {
                          ...that.state.imageData,
                          content: this.$txt.html()
                      }
                    });
                };
                that.state.imgTextEditor.create();
                that.state.imgTextEditor.$txt.html(content);
            }, 400);
        }else{
            this.state.imgTextEditor.$txt.html(content);
        }
    }
    renderSortButton(item, index){
        if(index == 0){
            return(<div className="divSorting">
                <Button icon="arrow-down" ghost className="firstUp" type="primary" onClick={this.btnSortFunction.bind(this, 'down', item)} title="向下"></Button>
                <Button icon="download" ghost className="firstDown" type="danger" onClick={this.btnSortFunction.bind(this, 'toBottom', item)} title="置底"></Button>
            </div>);
        }else if(index == (this.state.productDetial.imageTextList.length - 1)){
            return(<div className="divSorting">
                <Button icon="arrow-up" ghost className="firstUp" type="primary" onClick={this.btnSortFunction.bind(this, 'up', item)} title="向上"></Button>
                <Button icon="to-top" ghost className="firstDown" type="danger" onClick={this.btnSortFunction.bind(this, 'toFirst', item)} title="置顶"></Button>
            </div>);
        }else {
            return(<div className="divSorting">
                <Button icon="arrow-up" ghost className="firstUp" type="primary" onClick={this.btnSortFunction.bind(this, 'up', item)} title="向上"></Button>
                <Button icon="arrow-down" ghost className="firstDown" type="danger" onClick={this.btnSortFunction.bind(this, 'down', item)} title="向下"></Button>
            </div>);
        }
    }
    btnSortFunction(flap, item){
        var testObj = this.state.productDetial.imageTextList;
        if(flap == "up"){
            for (var i = 0; i < testObj.length; i++) {
                if(testObj[i].id == item.id){
                  var tempOrder = testObj[i-1].order;
                  testObj[i-1].order = testObj[i].order;
                  testObj[i].order = tempOrder;

                  var tempArray = testObj[i-1];
                  testObj[i-1] = testObj[i];
                  testObj[i] = tempArray;
                  break;
                }
            }

            this.state.productDetial.imageTextList = testObj;
        }else if(flap == "down"){
            for (var i = 0; i < testObj.length; i++) {
                if(testObj[i].id == item.id){
                  var tempOrder = testObj[i+1].order;
                  testObj[i+1].order = testObj[i].order;
                  testObj[i].order = tempOrder;

                  var tempArray = testObj[i+1];
                  testObj[i+1] = testObj[i];
                  testObj[i] = tempArray;
                  break;
                }
            }

            this.state.productDetial.imageTextList = testObj;
        }else if(flap == "toFirst"){
            for (var i = 0; i < testObj.length; i++) {
                if(testObj[i].id == item.id){
                  var tempOrder = testObj[0].order;
                  testObj[0].order = testObj[i].order;
                  testObj[i].order = tempOrder;

                  var tempArray = testObj[0];
                  testObj[0] = testObj[i];
                  testObj[i] = tempArray;
                  break;
                }
            }

            this.state.productDetial.imageTextList = testObj;
        }else if(flap == "toBottom"){
            for (var i = 0; i < testObj.length; i++) {
                if(testObj[i].id == item.id){
                  var tempOrder = testObj[testObj.length - 1].order;
                  testObj[testObj.length - 1].order = testObj[i].order;
                  testObj[i].order = tempOrder;

                  var tempArray = testObj[testObj.length - 1];
                  testObj[testObj.length - 1] = testObj[i];
                  testObj[i] = tempArray;
                  break;
                }
            }

            this.state.productDetial.imageTextList = testObj;
        }
        this.setState({productDetial: this.state.productDetial});
    }
    enableSorting(e){
        if(this.state.sortIsEnabled == false){
          $(".divSorting").css("display", "flex");
          this.setState({sortIsEnabled: true});
          actions.findProductDetial(this, this.props.routeParams.id);
        }else {
          if(this.state.orderUpdating == false){
              if(confirm("你确定要 保存 排序吗？")){
                  $(".divSorting").css("display", "none");
                  this.setState({sortIsEnabled: false, orderUpdating: true});
                  $("#btnEnableSorting")[0].blur();
                  var testObj = this.state.productDetial.imageTextList;
                  actions.adjustImageTextOrder(this, this.state.productDetial.product.id, {its: testObj});
              }
          }
        }
    }
    renderItem(item, index) {
        var imgCoverPicture = null;
        if(item.productPic != undefined){
            imgCoverPicture = <div className="divUserHead">
              <img className="imgCoverPicture" src={"http://tinsley.oss-cn-shenzhen.aliyuncs.com/" + item.productPic} onLoad={this.onImgLoad.bind(this)}/>
            </div>
        }else{
            imgCoverPicture = <div className="divUserHead">
              <img className="imgCoverPicture" src="/src/styles/images/listDefault_Large.png"/>
            </div>
        }
        var divSelected = null;
        if(this.state.tempProductData.length >= 1){
            var isHavePId = false;
            for (var i = 0; i < this.state.tempProductData.length; i++) {
                if(this.state.tempProductData[i] == item.id){
                  isHavePId = true; break;
                }
            }
            if(isHavePId == true){
                divSelected = <div className="divSelected" style={{display: 'block'}}></div>
            }else{
                divSelected = <div className="divSelected"></div>
            }
        }
        return (
            <Card key={index} onClick={this.selectProduct.bind(this, item)} className="divItemLineMini" style={{width: '316px', marginBottom: '16px'}}>
                {imgCoverPicture}
                <div className="userInfo">
                    <div className="divArticleTitle1" title={((item.productName == undefined)?"":item.productName)}>
                        <span>{'商品名：' + ((item.productName == undefined)?"":item.productName) + ((item.brandName == undefined)?"":"（" + item.brandName + "）")}</span>
                    </div>
                    <div className="divArticleContent2" title={((item.reminder == undefined)?"":item.reminder)}>
                        <span>{'温馨提示：' + ((item.reminder == undefined)?"":item.reminder)}</span>
                    </div>
                    <div className="pOverview">
                        <span style={{color: '#fff'}}>
                          <Icon type="eye" className="iconEye" title="浏览"/>{item.browseNumbers}
                          <Icon type="message" className="iconEye" title="评论"/>{item.commentIds.length}
                        </span>
                    </div>
                    <div className="divContent">
                        <span>{'创建：' + ((item.commitTime == undefined)?"":new Date(item.commitTime).Format("yyyy-MM-dd"))}</span>
                        <span>{((item.updateTime == undefined)?"":'，修改：' + new Date(item.updateTime).Format("yyyy-MM-dd"))}</span>
                    </div>
                    {
                      divSelected
                    }
                </div>
            </Card>
        );
    }
    render() {
      var imgCoverPicture = null; var sizes = null; var productColors = null; var createTimer = null; var updateTimer = null; var imageElement = null; var relatedProducts = null;
      var serverProductList = null; var commentNum = 0; var commentElement = null;
      if(this.state.productListData.length != 0){
          serverProductList = <div className="divFlexListMini">
            {
                this.state.productListData.map((item, index) => {
                    return this.renderItem(item, index);
                })
            }
          </div>
      }else{
          serverProductList = <div className="divEmptyDataMini">对不起，没有相关数据。</div>
      }
      const uploadButton = (
        <div className="divUpdate">
          <Icon type={this.state.loading ? 'loading' : 'plus'} style={{fontSize: '49px', color: '#949494'}} />
          <div style={{fontSize: '20px'}} className="divUpdateText">请上传图片！</div>
        </div>
      );
      const { getFieldDecorator } = this.props.form
      const formItemLayout = {
          labelCol: { span: 6 },
          wrapperCol: { span: 16 }
      }

      if(this.state.productDetial.product != null){
        imgCoverPicture = <div className="divUserHead">
          <Upload
            listType="picture-card"
            className="avatar-uploader"
            showUploadList={false}
            beforeUpload={this.beforeUpload.bind(this)}
          >
            {this.state.productDetial.product.productPic ? <img src={"http://tinsley.oss-cn-shenzhen.aliyuncs.com/" + this.state.productDetial.product.productPic} onLoad={this.onImgLoad.bind(this)} className="imgProduct"/> : uploadButton}
          </Upload>
        </div>

        if(this.state.productDetial.product.sizes != undefined){
          sizes = <div style={{marginTop: '4px'}}>
          {
            this.state.productDetial.product.sizes.map((item, index) => {
              var colorIndex = parseInt(16*Math.random())
              return <Tag key={index} color={clors[colorIndex]}>{item}</Tag>
            })
          }
          </div>
        }

        if(this.state.productDetial.product.productColors != undefined){
          productColors = <div style={{marginTop: '4px'}}>
          {
            this.state.productDetial.product.productColors.map((item, index) => {
              var colorIndex = parseInt(16*Math.random())
              return <Tag key={index} color={clors[colorIndex]}>{item}</Tag>
            })
          }
          </div>
        }
      }else {
        imgCoverPicture = <div className="divUserHead">
          <img className="imgCoverPicture" src="/src/styles/images/default.png"/>
          <img className="imgPromotion" style={{display: 'none'}} src="/src/styles/images/Promotion.png"/>
        </div>
      }

      if(this.state.createTimer != null){
        createTimer = <div>
          <FormItem
              label="创建时间："
              {...formItemLayout}>
                <Input value={this.state.createTimer} disabled={true}/>
          </FormItem>
        </div>
      }
      if(this.state.updateTimer != null){
        updateTimer = <div>
          <FormItem
              label="修改时间："
              {...formItemLayout}>
                <Input value={this.state.updateTimer} disabled={true}/>
          </FormItem>
        </div>
      }
      //图文元素（遍历）
      var imageElement = <div className="divFooter"><Button icon="picture" type="primary" onClick={this.btnShowImage.bind(this, true)} style={{marginTop: '10px', marginBottom: '10px'}}>添加图文</Button></div>;
      if(this.state.productDetial != null && this.state.productDetial.imageTextList != undefined){
          imageElement = <Spin spinning={this.state.orderUpdating} tip="排序（Order）提交中..." style={{right: '0px', maxHeight: '81px'}}>
              <div id="divImageText" style={{paddingTop: '10px'}}>
                {
                    this.state.productDetial.imageTextList.map((item, index)=>{
                        return(<div key={index} className="divSubItem" style={{marginBottom: '10px'}}>
                            <Spin ref={"imageText_" + index} spinning={this.state.deleteImageLoading} tip={this.state.tipImageTextSpinning}>
                                <img src={((item.pic)?"http://tinsley.oss-cn-shenzhen.aliyuncs.com/" + item.pic:"")} style={{marginLeft: 'auto', marginRight: 'auto', display: ((item.pic ==  undefined)?'none':'block')}}/>
                                {
                                  this.onlyDeletedImg(item.id, item.pic, index)
                                }
                                <div dangerouslySetInnerHTML={{__html: item.content}} style={{wordWrap: 'break-word', marginTop: '10px'}}/>
                                <div className="divImageButton">
                                    <Popconfirm title="你确定要 删除 图文吗?" onConfirm={this.btnDeleteImage.bind(this, item.id, ((item.pic)?item.pic:""), index)} placement="topRight">
                                        <Button icon="delete" type="danger" className="deleteVideo">删除</Button>
                                    </Popconfirm>
                                    <Button icon="edit" type="primary" onClick={this.btnModifyImage.bind(this, item.id, item.order, item.content, item)}>修改图文</Button>
                                </div>
                            </Spin>
                            {
                                this.renderSortButton(item, index)
                            }
                        </div>)
                    })
                }
                <div className="divFooter">
                  <Button id="btnEnableSorting" icon="swap" type="primary" loading={this.state.orderUpdating} onClick={this.enableSorting.bind(this)} style={{marginRight: '10px', display: ((this.state.productDetial.imageTextList.length >= 2)?"inline-block":"none")}}>{((this.state.sortIsEnabled)?"关闭":"启动")}排序</Button>
                  <Button icon="picture" type="primary" onClick={this.btnShowImage.bind(this, true)}>添加图文</Button>
                </div>
            </div>
          </Spin>
      }

      //商品关联（遍历）
      var relatedProducts = <div className="divFooter"><Button icon="link" type="primary" onClick={this.btnShowProductList.bind(this, true)} style={{marginTop: '10px', marginBottom: '10px'}}>商品关联</Button></div>;
      if(this.state.productDetial != null && this.state.productDetial.relatedProducts != undefined){
          var relatedContainer = null;
          var relatedItem = this.state.productDetial.relatedProducts.map((item, index)=>{
              var imgCoverPicture = null;
              if(item.productPic != undefined){
                  imgCoverPicture = <div className="divUserHead" style={{marginLeft: '-5px'}}>
                    <img className="imgCoverPicture" src={"http://tinsley.oss-cn-shenzhen.aliyuncs.com/" + item.productPic} onLoad={this.onImgLoad.bind(this)}/>
                  </div>
              }else{
                  imgCoverPicture = <div className="divUserHead" style={{marginLeft: '-5px'}}>
                    <img className="imgCoverPicture" src="/src/styles/images/default.png"/>
                  </div>
              }
              return(<div key={index} className="divSubItem">
                  <Spin ref={"imgRelatedText_" + index} spinning={this.state.deleteImageLoading} tip="删除中">
                      <Card className="divItemLineMini" style={{width: '316px'}}>
                          {imgCoverPicture}
                          <div className="userInfo" style={{ marginTop: '291px', marginLeft: '-305px'}}>
                              <div className="divArticleTitle1" style={{width: '287px'}} title={((item.productName == undefined)?"":item.productName)}>
                                  <span>{'商品名：' + ((item.productName == undefined)?"":item.productName) + ((item.brandName == undefined)?"":"（" + item.brandName + "）")}</span>
                              </div>
                              <div className="divArticleContent2" style={{width: '287px'}} title={((item.reminder == undefined)?"":item.reminder)}>
                                  <span>{'温馨提示：' + ((item.reminder == undefined)?"":item.reminder)}</span>
                              </div>
                              <div className="pOverview" style={{width: '293px'}}>
                                  <span style={{color: '#fff'}}>
                                    <Icon type="eye" className="iconEye" title="浏览"/>{item.browseNumbers}
                                    <Icon type="message" className="iconEye" title="评论"/>{item.commentIds.length}
                                  </span>
                                  <div style={{float: 'right'}}>
                                      <Popconfirm title="你确定要 删除 关联吗?" onConfirm={this.btnDeleteRelated.bind(this, item.id)} placement="topRight">
                                          <Button icon="delete" shape="circle" type="danger"></Button>
                                      </Popconfirm>
                                  </div>
                              </div>
                              <div className="divContent" style={{width: '309px'}}>
                                  <span>{'创建：' + ((item.commitTime == undefined)?"":new Date(item.commitTime).Format("yyyy-MM-dd"))}</span>
                                  {/*<span>{((item.updateTime == undefined)?"":'，修改：' + new Date(item.updateTime).Format("yyyy-MM-dd"))}</span>*/}

                              </div>
                          </div>
                      </Card>
                  </Spin>
              </div>)
          })
          if(this.state.productDetial.relatedProducts.length <= 0){
            relatedContainer = <div className="divEmptComment">对不起，没有相关产品</div>
          }else {
            relatedContainer = <div className="divFlexListMini divRelatedItem" style={{marginBottom: '30px'}}>
              {relatedItem}
            </div>
          }
          relatedProducts = <div id="divImageText" style={{paddingTop: '10px'}}>
              <div className="divRelatedProducts">
                <div className="divRelatedProductsTitle">相关商品{"（" + this.state.productDetial.relatedProducts.length + "）"}</div>
              </div>
              {relatedContainer}
              <div className="divFooter">
                <Button icon="link" type="primary" onClick={this.btnShowProductList.bind(this, true)} style={{marginTop: '10px', marginBottom: '10px'}}>商品关联</Button>
              </div>
          </div>
      }
      if(this.state.productDetial.comments != undefined){
        if(this.state.productDetial.comments.length >= 1){
          commentNum = "（" + this.state.productDetial.comments.length + "）";
          commentElement = this.state.productDetial.comments.map((item, index) => {
              var commentorName = "";
              if(item.anonymity == true){
                commentorName = item.id.substr(0, 8)+"!@#$";
              }else {
                commentorName = item.commentorName;
              }
              item.commentDate = new Date(item.commentDate).Format("yyyy-MM-dd hh:mm");
              return (
                <div className="divItem" key={index}>
                  <div className="divInfo">
                    <img src={(item.avatarUrl)?"http://tinsley.oss-cn-shenzhen.aliyuncs.com/" + item.avatarUrl:""} className="imgAvatar"/>
                    <div>{commentorName}</div>
                  </div>
                  <div className="divContent">{item.content}</div>
                  <div className="divCommentDate">{item.commentDate}</div>
                </div>
              );
          })
        }else {
          commentNum = "（0）";
          commentElement = <div className="divEmptComment">对不起，没有相关评论</div>
        }
      }
      return (
        <div className="divDetail">
            {imgCoverPicture}
            <div className="productInfo">
                <div className="divProductTitle" title={((this.state.productDetial.product.productName == undefined)?"":this.state.productDetial.product.productName) + '(' + ((this.state.productDetial.product.brandName == undefined)?"":this.state.productDetial.product.brandName) + ")"}>
                    <span>{((this.state.productDetial.product.productName == undefined)?"":this.state.productDetial.product.productName)}{'(' + ((this.state.productDetial.product.brandName == undefined)?"":this.state.productDetial.product.brandName)+")"}</span>
                    <div className="divProductSubTitle" title={((this.state.productDetial.product.title == undefined)?"":this.state.productDetial.product.title)}>{((this.state.productDetial.product.title == undefined)?"":this.state.productDetial.product.title)}</div>
                </div>
                <div className="divProductPrice">
                    <span className="spanPriceSymbol">Rm</span>
                    <span className="spanPrice">{((this.state.productDetial.product.discountPrice == undefined)?"":this.state.productDetial.product.discountPrice)}</span>
                    <span className="spanDiscountPrice">{'Rm ' + ((this.state.productDetial.product.price == undefined)?"":this.state.productDetial.product.price)}</span>

                    <span className="spanBrowseAndStock" style={{color: '#9a9a9a'}}>
                      <span title="浏览次数"><Icon type="eye" className="iconEye"/>{this.state.productDetial.product.browseNumbers}</span>
                      <span title="库存"><Icon type="shop" className="iconLike"/>{this.state.productDetial.product.stock}</span>
                    </span>
                </div>
                <div className="divProductContent" title={((this.state.productDetial.product.placeOfProduction == undefined)?"":this.state.productDetial.product.placeOfProduction)}>
                    <span className="spanPlaceOfProduction">产地:</span>
                    <span className="spanPlaceOfProductionContent">{((this.state.productDetial.product.placeOfProduction == undefined)?"":this.state.productDetial.product.placeOfProduction)}</span>
                </div>
                <div className="divSizes">
                  尺寸:
                  {sizes}
                </div>
                <div className="divProductColors">
                  产品颜色:
                  {productColors}
                </div>
                <div className="divContentTimer" style={{display: ((this.state.productDetial.product.updateTime == undefined)?"block":"none")}}>
                    <span className="divTimerTitle">创建时间:</span>
                    <span>{((this.state.productDetial.product.commitTime == undefined)?"":new Date(this.state.productDetial.product.commitTime).Format("yyyy-MM-dd hh:mm:ss"))}</span>
                </div>
                <div className="divContentTimer" style={{display: ((this.state.productDetial.product.updateTime == undefined)?"none":"block")}}>
                    <span className="divTimerTitle">修改时间:</span>
                    <span>{((this.state.productDetial.product.updateTime == undefined)?"":new Date(this.state.productDetial.product.updateTime).Format("yyyy-MM-dd hh:mm:ss"))}</span>
                </div>
                <div className="divOperations">
                  <Button icon="edit" type="primary" onClick={this.editProduct.bind(this)}>编辑商品</Button>
                  <Button type="danger" onClick={this.changeStatus.bind(this)}>状态:({(this.state.productDetial.product.status == "inactive")?"禁用":"启用"})</Button>
                </div>
            </div>
            <div className="divIngredients" title={((this.state.productDetial.product.reminder == undefined)?"":this.state.productDetial.product.reminder)}>
                <div className="divIngredientsTitle">
                  <hr />
                  <div className="divTitle">成分描述</div>
                </div>
                <div className="divIngredientsContent">{((this.state.productDetial.product.ingredients == undefined)?"":this.state.productDetial.product.ingredients)}</div>
            </div>
            <div className="divReminder" title={((this.state.productDetial.product.reminder == undefined)?"":this.state.productDetial.product.reminder)}>
                <div className="divReminderTitle">
                  <hr />
                  <div className="divTitle">温馨提示</div>
                </div>
                <div className="divReminderContent">{((this.state.productDetial.product.reminder == undefined)?"":this.state.productDetial.product.reminder)}</div>
            </div>
            {imageElement}
            {relatedProducts}
            <div>
              <div className="divRelatedProducts" style={{borderBottom: '1px solid #1890ff'}}>
                <div className="divRelatedProductsTitle" style={{backgroundColor: '#1890ff'}}>商品评论{commentNum}</div>
              </div>
              {commentElement}
            </div>

            <Modal
              visible={this.state.addProductPage}
              title="基础信息"
              width="650px"
              maskClosable={false}
              footer={null}
              wrapClassName="vertical-center-modal"
              onCancel={this.resetFields.bind(this)}
            >
              <Spin spinning={this.state.updateLoading} tip="Update Product...">
                <Form onSubmit={this.addAndEditSubmit.bind(this)} style={{width: '100%'}}>
                    <div className="divFromScroll">
                      <FormItem
                          label="商品名"
                          {...formItemLayout}>
                          {getFieldDecorator('productName', {
                            rules: [{ required: true, message: '商品名 必填。'}],
                            initialValue: this.state.productDetial.product.productName
                          })(
                            <Input placeholder="请输入商品名..." onPressEnter={this.screenedCarriageReturn.bind(this)}/>
                          )}
                      </FormItem>

                      <Row gutter={8}>
                        <Col span={12}>
                          <FormItem
                              label="原价格"
                              labelCol={{span: 10, offset: 2}}
                              wrapperCol={{span: 12, offset: 0}}>
                              {getFieldDecorator('price', {
                                rules: [{ required: true, message: '原价格 必填。'}],
                                initialValue: (this.state.productDetial.product.price)?this.state.productDetial.product.price:0
                              })(
                                <InputNumber
                                  min={0}
                                  precision={2}
                                  style={{width: '120px', marginLeft: '2px'}}

                                />
                              )}
                          </FormItem>
                        </Col>
                        <Col span={10}>
                          <FormItem
                              label="折扣价"
                              labelCol={{span: 10, offset: 0}}
                              wrapperCol={{span: 12, offset: 0}}>
                              {getFieldDecorator('discountPrice', {
                                rules: [{ required: true, message: '折扣价 必填。'}],
                                initialValue: (this.state.productDetial.product.discountPrice)?this.state.productDetial.product.discountPrice:0
                              })(
                                <InputNumber
                                  min={0}
                                  precision={2}
                                  style={{width: '120px'}}
                                />
                              )}
                          </FormItem>
                        </Col>
                      </Row>
                      <Row gutter={8}>
                        <Col span={12}>
                          <FormItem
                              label="库存"
                              labelCol={{span: 10, offset: 2}}
                              wrapperCol={{span: 12, offset: 0}}>
                              {getFieldDecorator('stock', {
                                rules: [{ required: true, message: '库存 必填。'}],
                                initialValue: (this.state.productDetial.product.stock)?this.state.productDetial.product.stock:0
                              })(
                                <InputNumber min={0} style={{width: '120px', marginLeft: '2px'}}/>
                              )}
                          </FormItem>
                        </Col>
                        <Col span={10}>
                          <FormItem
                              label="保质期"
                              labelCol={{span: 10, offset: 0}}
                              wrapperCol={{span: 12, offset: 0}}>
                              {getFieldDecorator('qualityGuaranteePeriod', {
                                rules: [{ required: true, message: '保质期 必填。'}],
                                initialValue: (this.state.productDetial.product.qualityGuaranteePeriod)?parseInt(this.state.productDetial.product.qualityGuaranteePeriod):0
                              })(
                                <InputNumber />
                              )}
                              <span className="ant-form-text"> 天</span>
                          </FormItem>
                        </Col>
                      </Row>

                      <Row gutter={8}>
                        <Col span={12}>
                          <FormItem
                              label="类型"
                              labelCol={{span: 10, offset: 2}}
                              wrapperCol={{span: 12, offset: 0}}>
                              {getFieldDecorator('type', {
                                rules: [{ required: true, message: '类型 必填。'}],
                                initialValue: (this.state.productDetial.product.type)?this.state.productDetial.product.type:"1"
                              })(
                                <Select
                                  placeholder="选择类型"
                                  onChange={this.handleSelectChange}
                                  style={{width: '120px'}}
                                >
                                  <Option value="1">推荐品牌</Option>
                                  <Option value="2">女孩护肤</Option>
                                  <Option value="3">面膜</Option>
                                  <Option value="4">彩妆/口红</Option>
                                  <Option value="5">个人护理</Option>
                                  <Option value="6">保健产品</Option>
                                </Select>
                              )}
                          </FormItem>
                        </Col>
                        <Col span={10}>
                          <FormItem
                              labelCol={{span: 10, offset: 0}}
                              wrapperCol={{span: 12, offset: 0}}>
                              {getFieldDecorator('mustCheckOut', {
                                rules: [{ required: false}],
                                initialValue: (this.state.productDetial.product.mustCheckOut)?this.state.productDetial.product.mustCheckOut:false,
                                valuePropName: 'checked'
                              })(
                                <Checkbox style={{marginLeft: '36px'}} >每日必看</Checkbox>
                              )}
                          </FormItem>
                        </Col>
                      </Row>
                      <FormItem
                          label="置顶类型"
                          {...formItemLayout}>
                          {getFieldDecorator('setTopType', {
                            rules: [{ required: true, message: '置顶类型 必填。'}],
                            initialValue: (this.state.productDetial.product.setTopType)?this.state.productDetial.product.setTopType:"NO"
                          })(
                            <Select
                              placeholder="选择置顶类型"
                              onChange={this.handleSelectChange}
                            >
                              <Option value="YES">置顶</Option>
                              <Option value="NO">取消置顶</Option>
                            </Select>
                          )}
                      </FormItem>
                      <FormItem
                          label="标题"
                          {...formItemLayout}>
                          {getFieldDecorator('title', {
                            rules: [{ required: true, message: '标题 必填。'}],
                            initialValue: this.state.productDetial.product.title
                          })(
                            <Input style={{ minWidth: 260 }} placeholder="请输入标题..." onPressEnter={this.screenedCarriageReturn.bind(this)}/>
                          )}
                      </FormItem>

                      <FormItem
                          label="尺寸"
                          {...formItemLayout}>
                          {getFieldDecorator('sizes', {
                            rules: [{ required: true, message: '尺寸 必填。'}],
                            initialValue: this.state.productDetial.product.sizes
                          })(
                            <Select
                              mode="tags"
                              size="default"
                              placeholder="请输入尺寸，回车..."
                              style={{ width: '100%' }}
                              tokenSeparators={[',','|']}
                              onInputKeyDown={this.screenedCarriageReturn.bind(this)}
                              getPopupContainer={triggerNode => triggerNode.parentNode}
                            ></Select>
                          )}
                      </FormItem>
                      <FormItem
                          label="产品颜色"
                          {...formItemLayout}>
                          {getFieldDecorator('productColors', {
                            rules: [{ required: true, message: '产品颜色 必填。'}],
                            initialValue: this.state.productDetial.product.productColors
                          })(
                            <Select
                              mode="tags"
                              size="default"
                              placeholder="请输入产品颜色，回车..."
                              style={{ width: '100%' }}
                              tokenSeparators={[',','|']}
                              onInputKeyDown={this.screenedCarriageReturn.bind(this)}
                              getPopupContainer={triggerNode => triggerNode.parentNode}
                            ></Select>
                          )}
                      </FormItem>

                      <FormItem
                          label="商品品牌"
                          {...formItemLayout}>
                          {getFieldDecorator('brandName', {
                            rules: [{ required: false}],
                            initialValue: this.state.productDetial.product.brandName
                          })(
                            <Input style={{ minWidth: 260 }} placeholder="请输入品牌（如：香莱尔）..." onPressEnter={this.screenedCarriageReturn.bind(this)}/>
                          )}
                      </FormItem>
                      <FormItem
                          label="产地"
                          {...formItemLayout}>
                          {getFieldDecorator('placeOfProduction', {
                            rules: [{ required: false}],
                            initialValue: this.state.productDetial.product.placeOfProduction
                          })(
                            <Input style={{ minWidth: 260 }} placeholder="请输入产地..." onPressEnter={this.screenedCarriageReturn.bind(this)}/>
                          )}
                      </FormItem>
                      <FormItem
                          label="商品成分"
                          {...formItemLayout}>
                          {getFieldDecorator('ingredients', {
                            rules: [{ required: false}],
                            initialValue: this.state.productDetial.product.ingredients
                          })(
                            <TextArea style={{ minWidth: 260, resize: 'none' }} type="textarea" rows={2} placeholder="请输入成分描述..." />
                          )}
                      </FormItem>
                      <FormItem
                          label="温馨提示"
                          {...formItemLayout}>
                          {getFieldDecorator('reminder', {
                            rules: [{ required: false}],
                            initialValue: this.state.productDetial.product.reminder
                          })(
                            <TextArea style={{ minWidth: 260, resize: 'none' }} rows={2} placeholder="请输入温馨提示..." />
                          )}
                      </FormItem>

                      {createTimer}
                      {updateTimer}
                    </div>
                    <FormItem wrapperCol={{ span: 25, offset: 0 }} style={{ marginTop: 24,textAlign: 'center' }}>
                        <Button type="primary" className="btnPersonalClose" htmlType="submit" icon="save">修改商品信息</Button>
                        <Button icon="close" onClick={this.resetFields.bind(this)}>取 消</Button>
                    </FormItem>
                </Form>
              </Spin>
            </Modal>
            <Modal
              title="添加：图文"
              visible={this.state.updateImageVisible}
              wrapClassName="vertical-center-modal"
              footer={null}
              onCancel={this.btnShowImage.bind(this, false)}
              width="850px"
              maskClosable={false}
            >
                <Spin spinning={this.state.updateImageLoading} tip={this.state.updateImageAndTextProgress}>
                    <div className="divVideo">
                        <div style={{display: 'flex', flexDirection: "column"}}>
                            <div className="divItem">
                                <div style={{textAlign: 'left', marginBottom: '6px', paddingLeft: '1px'}}>商品图片：</div>
                                <img id="imgImageAndText" src="/src/styles/images/imageTxt.png" className="divImgDefault" />
                            </div>
                            {
                              <div className="divItem">
                                  <div style={{textAlign: 'left', marginBottom: '6px', paddingLeft: '1px'}}>输入描述（富文本）：</div>
                                  <Tooltip placement="bottomLeft" title="请输入内容（非必填）">
                                      <div id="divImgText" style={{height: '250px', width: '665px'}} className="wangEditor-txt"></div>
                                  </Tooltip>
                              </div>
                            }
                        </div>

                        <Button icon="close" className="btnClose" onClick={this.btnShowImage.bind(this, false)}>取 消</Button>
                        <Tooltip placement="bottomRight" title="选择图片（可选）">
                            <input id="filePic" type="file" className="inputFile" onChange={this.beforeUploadImage.bind(this)}/>
                            <Button icon="picture" type="primary" className="btnClose btnGreen">选择图片</Button>
                        </Tooltip>
                        <Tooltip placement="bottomRight" title="保存信息">
                            <Button icon="upload" type="primary" onClick={this.btnSaveRichText.bind(this)}>保 存</Button>
                        </Tooltip>
                    </div>
                </Spin>
            </Modal>
            <Modal
                title="请选择商品"
                visible={this.state.productList}
                wrapClassName="center-modal"
                footer={null}
                onCancel={this.btnShowProductList.bind(this, false)}
                width="100%"
                maskClosable={false}
            >
                <Spin spinning={this.state.updateLoadingProduct} wrapperClassName="spinUpdateLoading" tip="加载中...">
                    <div className="divType">
                        类型：<Select defaultValue="-1" style={{ minWidth: 120 }} onChange={this.onTypeChange.bind(this)} className="selectType">
                          <Option value="-1">全部</Option>
                          <Option value="1">推荐品牌</Option>
                          <Option value="2">女孩护肤</Option>
                          <Option value="3">面膜</Option>
                          <Option value="4">彩妆/口红</Option>
                          <Option value="5">个人护理</Option>
                          <Option value="6">保健产品</Option>
                        </Select>&nbsp;
                        状态：启用
                    </div>
                    {serverProductList}
                    <TableView ref="productListView" totalPageNum={this.totalPageNum.bind(this)}
                           isInternalRendering={false} getServiceData={this.getServiceData.bind(this)}
                           isService={true} searchObject={this.state.searchObject} pageNum={10}
                           url={this.state.findProduct} method="post" onPageSelected={()=>{this.setState({updateLoading: true})}}/>
                </Spin>
                <div style={{ position: 'fixed', right: '18px', bottom: '18px'}}>
                    <Button icon="close" style={{marginRight: '15px'}} onClick={this.btnShowProductList.bind(this, false)}>取 消</Button>
                    <Tooltip placement="bottomRight" title="选择商品后，确定">
                        <Button icon="check-circle-o" type="primary" className="btnClose" onClick={this.btnConfirmProduct.bind(this)}>确定商品</Button>
                    </Tooltip>
                </div>
            </Modal>
            <Modal title="提示" maskClosable={false} wrapClassName="vertical-center-modal" visible={this.state.visibleAddAlert} onOk={this.onConfirmUpdate.bind(this)} onCancel={()=>{this.setState({visibleAddAlert: false})}}>
                你确定要 修改 商品?
            </Modal>
        </div>
      )
    }
}

productDetail = Form.create()(productDetail);
export default productDetail;
